<template>
    <div class="success">
      <div class="back">
        <img src="../../pages/image/icons/close.png" alt="" @click="back">
      </div>
      <img class="top" src="../../pages/image/icons/M2.SS2_400x400.jpg" alt="">
      <div class="sole">
        <input type="text" maxlength="11" placeholder="手机号">
        <input type="password" maxlength="16" placeholder="密码">
        <p>找回密码</p>
        <input type="button" class="button_first" value="登录">
        <router-link to="./login" style="text-decoration: none"><input type="button" class="button" value="注册"></router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: 'success',
  methods: {
    back () {
      this.$router.push({path: '/success'})
    }
  }
}
</script>

<style scoped lang="scss">
  .success{
    width: 100vw;
    height: 100vh;
    background: #fff;
    .back{
      img{
        width: 45px;
        height: 45px;
        margin: 72px 0 0 72px;
      }
    }
    .top{
      width: 198px;
      height: 198px;
      display: flex;
      margin: 125px 0 0 525px;
      border-radius: 50%;
    }
    .sole{
      margin: 125px 0 0 100px;
      input{
        border: none;
        display: block;
        background: transparent;
        width: 1058px;
        height: 150px;
        border-bottom: solid 1px #e5e5e5;
      }
      input::placeholder{
        font-size: 50px;
        text-indent: 20px;
      }
      p{
        margin: 40px 100px 35px 0;
        text-align: right;
        font-size: 38px;
      }
      .button,.button_first{
        width: 1058px;
        height: 135px;
        margin-top: 45px;
        background: transparent;
        border: solid 1px;
        color: black;
      }
      .button_first{
        background: #ff5e37;
        color: #fff;
      }
      .button:hover{
        background: #ff5e37;
        color: #fff;
      }
    }
  }
</style>
